<template>
	<view class="page page-fill">
		<view class="page-block info-list">

			<view class="item-wapper face-line-upbottom" @click="operator">
				<view class="info-words">头像</view>
				<view class="right-wapper">
					<image src="../../static/icons/108x108.png" class="face"></image>
					<view class="arrow-block">
						<image src="../../static/icons/left-gray-arrow.png" class="arrow-ico"></image>
					</view>
				</view>
			</view>

			<view class="line-top">
				<view class="line"></view>
			</view>

			<!-- 昵称 -->
			<view class="item-wapper" @click="modifyNickname">
				<view class="info-words">昵称</view>
				<view class="right-wapper">
					<view class="gray-fields">英雄</view>
					<view class="arrow-block">
						<image src="../../static/icons/left-gray-arrow.png" class="arrow-ico"></image>
					</view>
				</view>
			</view>

			<view class="line-top">
				<view class="line"></view>
			</view>

			<!-- 生日 -->
			<view class="item-wapper" @click="modifyBirthday">
				<view class="info-words">生日</view>
				<view class="right-wapper">
					<view class="gray-fields">
						2021.11.11
					</view>
					<view class="arrow-block">
						<image src="../../static/icons/left-gray-arrow.png" class="arrow-ico"></image>
					</view>
				</view>
			</view>

			<view class="line-top">
				<view class="line"></view>
			</view>

			<!-- 性别 -->
			<view class="item-wapper" @click="modifySex">
				<view class="info-words">
					性别
				</view>
				<view class="right-wapper">
					<view class="gray-fields">
						<view v-if="userInfo.sex == 1">男</view>
						<view v-else-if="userInfo.sex == 0">女</view>
						<view v-else>未选择</view>
					</view>
					<view class="arrow-block">
						<image src="../../static/icons/left-gray-arrow.png" class="arrow-ico"></image>
					</view>
				</view>
			</view>

		</view>

		<!-- <view class="footer-wapper">
			<view class="footer-words" @click="clearStorage">
				清理缓存
			</view>
			<view class="footer-words" @click="loginOut" style="margin-top: 10upx;">
				退出登录
			</view>
		</view> -->

	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {},
				// buttonRect: {}
			}
		},
		onShow() {},
		methods: {
			// 清理缓冲
			clearStorage() {
				uni.clearStorageSync()
				uni.showToast({
					title: '清理缓存成功',
					mask: false,
					duration: 1500
				})
			},

			// 选择男女
			modifySex() {

			},

			// 退出登录
			loginOut() {
				let globalUser = this.$getGlobalUser()
				console.log(globalUser, 'globalUser');
				// 后台用户方法
				uni.removeStorageSync("globalUser")
				uni.switchTab({
					url: "../me/me"
				})
			},

			// 头像预览
			operator() {
				const userInfo = this.$getGlobalUser()
				uni.showActionSheet({
					itemList: ["查看我的头像", "从相册选择上传"],
					// popover: {
					// 	top: this.buttonRect.top * 2 + this.buttonRect.height,
					// 	left: this.buttonRect.left + this.buttonRect.width / 2
					// },
					success: (res) => {
						console.log(userInfo, 'userInfo');
						let userArr = []
						userArr.push(userInfo.cover)
						if (res.tapIndex === 0) {
							// 预览头像
							uni.previewImage({
								urls: userArr,
								current: userArr[0]
							})
						} else if (res.tapIndex === 1) {
							// 上传头像
							uni.chooseImage({
								count: 1,
								sizeType: ["compressed"],
								success: (res) => {
									let tempFilePath = res.tempFilePaths[0]
									// 页面跳转
									uni.navigateTo({
										url: "../meFace/meFace?tempFilePath=" +
											tempFilePath
									})
								}
							})
						}
					}
				})
			},

			// 修改昵称
			modifyNickname() {
				uni.navigateTo({
					url: "../meNickName/meNickName"
				})
			},

			// 修改生日
			modifyBirthday() {
				uni.navigateTo({
					url: "../meBirthday/meBirthday"
				})
			},

			// 选择男女
			modifySex() {
				uni.navigateTo({
					url: "../sex/sex"
				})
			}
		}
	}
</script>

<style>
	@import url('./meInfo.scss');
</style>
